import ReactDOM from 'react-dom'
import React, { Component } from 'react'

// 类组件定义状态
class App extends Component {

  state = {
    count: 0,
    user: {
      name: 'tom',
      age: 18
    },
    list: ['电脑', '手机', '相机']
  }

  handleClick = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  // 修改对象
  updateUser = () => {
    // 1. 新对象  ===>  2. 保持原来数据  ===> 3. 修改对应数据
    this.setState({
      user: {
        ...this.state.user,
        age: 28
      }
    })
  }

  // 修改数组
  updateList = () => {
    // 1. 新数组  ===>  2. 保持原来数据  ===> 3. 追加一项数据
    this.setState({
      list: [...this.state.list, '电视']
    })
  }

  render() {
    return (
      <div>
        <div>计数器：{this.state.count}</div>
        <button onClick={this.handleClick}>+1</button>
        <hr />
        <div>
          <p>姓名：{this.state.user.name}</p>
          <p>年龄：{this.state.user.age}</p>
          <button onClick={this.updateUser}>修改年龄</button>
        </div>
        <hr />
        <div>
          <ul>
            {this.state.list.map(item => <li key={item}>{item}</li>)}
          </ul>
          <button onClick={this.updateList}>追加电视</button>
        </div>
      </div>
    )
  }
}

// 结论：三种方式都可以，建议第三种，事件处理函数定义为箭头函数

ReactDOM.render(<App />, document.getElementById('root'))
